<script lang="ts" setup>
import { onMounted, ref } from 'vue'



// 表格js
import { h } from 'vue'
import type { VNode } from 'vue'
import type { TableColumnCtx } from 'element-plus'
import http from '@/http';
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'

//获取当前页相关用户数据的方法

//当前页
let pageNum = ref(1)
//每页条数
let pageSize = ref(2)
//总条数
let total = ref(0)
const doctorName = ref('');
const careTime = ref('');
console.log
const tableData = ref();
function getPage() {
  http.get('/hisRegistration/all', {
    params: {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      doctorName: doctorName.value,
      careTime: careTime.value
    }
  }
  )
    .then((res) => {
      console.log(res)
      doctorName.value = ''
      careTime.value = ''
      tableData.value = res.list
      console.log(res);
      total.value=res.total
    })
}
const handleCurrentChange = (val: number) => {
    pageNum.value = val
    //获取当前页的数据
    getPage()
}
console.log("aa" + tableData)

onMounted(() => {
  getPage();
})


</script>
<template>

  <!-- 搜索框 -->
  <form>
    <div id="sousuokuang">
      <ul>
        <li>项目名称&nbsp;&nbsp;<input type="text" class="sou" placeholder="请输入医生姓名" v-model="doctorName"></li>
        <li>检查时间&nbsp;&nbsp;<input type="text" class="sou" v-model="careTime" placeholder="就诊时间"></li>
        <li><el-button type="primary" :icon="Search" style="height: 25px;" @click="getPage">搜索</el-button></li>
        <li><input type="reset"
            style="background-color: #409eff; width: 80px; height: 25px; color: aliceblue; border: 0px; border-radius: 10%;">
        </li>
      </ul>
    </div>
  </form>
  <!-- 表格 -->
  <el-table :data="tableData" border show-summary style="width: 100%;">
    <el-table-column property="regNumber" label="挂号ID" />
    <el-table-column property="userId" sortable label="医生编号" />
    <el-table-column property="doctorName" sortable label="医生姓名" />
    <el-table-column property="regItemAmount" sortable label="挂号费用" />
    <el-table-column property="patientName" sortable label="患者姓名" />
    <el-table-column property="visitDate" sortable label="就诊时间" />
  </el-table>
  <!-- 分页 -->
  <el-row justify="center">
        <el-col :span="12" :offset="6">
            <el-pagination background layout="prev, pager,next,total" :total="total" :page-size="pageSize"
                v-model:current-page="pageNum" @current-change="handleCurrentChange" />
        </el-col>
    </el-row>
</template>
<style scoped>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

ul li {
  list-style: none;
  float: left;
  padding-left: 20px;
}

#sousuokuang {
  height: 50px;
}

.sou {
  height: 20px;
}
</style>
